<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
</head>
<body>
<div class="layui-container" style="margin-top: 50px;">

    <div class="layui-container" style="width: 500px;height: 330px;padding-top: 60px;">
        <form class="layui-form" action="" method="post"  enctype="multipart/form-data">
            <div class="layui-form-item">
                <label class="layui-form-label">ID：</label>
                <div class="layui-inline">
                    <input type="text" id="id" name="id"  lay-verify="required" readonly="" autocomplete="off"  class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品名称：</label>
                <div class="layui-inline">
                    <input type="text" id="name" name="name"  lay-verify="required" autocomplete="off" placeholder="请输入昵称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别：</label>
                <div class="layui-inline">
                    <input type="radio" id="up" name="state" value="0" title="上架" >
                    <input type="radio" id="down" name="state" value="1" title="未上架">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">价格：</label>
                <div class="layui-inline">
                    <input type="text" id="price" name="price"  lay-verify="required" placeholder="请输入电话" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">logoUrl：</label>
                <input type="file"  accept="image/jpg,image/png,image/jpeg" class="form-control"
                       name="image" id="image" placeholder="**">
                <div class="layui-inline">
                    <img class="layui-upload-img" id="imageshow" name="imageshow">-->
<!--                    <input type="text" id="logoUrl" name="logoUrl"  lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">-->
                </div>

            </div>

            <div class="layui-form-item">
                <input type="button" class="layui-btn" lay-submit="" id="commit" style="margin-left: 160px;" value="提交"></input>
            </div>
        </form>
    </div>
</div>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
<script th:src="@{/js/jquery-3.4.1.js}" charset="utf-8"></script>
<script>
    layui.use(['form', 'element','jquery','upload'], function(){
        var form = layui.form;
        var element = layui.element;

        var $ = layui.$;
        $(function() {
            var token = layui.data('token').data;
            $.ajax({
                type: 'get',
                url: '/menu/findById/3',
                dataType: "json",
                data: {

                },
                headers:{"token":token},
                success: function(result) {
                    $("#id").val(result.id);
                    $("#name").val(result.name);
                    $("#up").attr("checked",result.state == 0?true:false);
                    $("#down").attr("checked",result.state == 1?true:false);
                    $("#imageshow").attr("src",result.logoUrl);
                    $("#price").val(result.price);
                    //元素更新必须使用,否则没有效果
                    form.render();
                },
                error: function(error) {
                    alert(error);
                }

            });

        });
    });
        // //自定义验证规则
        // form.verify({
        //     price: [/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, "请输入正确的价格"]
        // });
</script>
<script>
    $(function(){

        $("#commit").click(function () {

            var id = $("#id").val();
            var name = $("#name").val();
            var price = $("#price").val();
            var state = $('input[type=radio][name=state]:checked').val();
            // 获取图片
            var logoUrl = document.getElementById("image");
            var file = logoUrl.files[0];

            var formdata=new FormData();
            formdata.append("image",file);
            formdata.append("id",id);
            formdata.append("name",name);
            formdata.append("price",price);
            formdata.append("state",state);

            $.ajax({
                url:"/menu" +
                    "/update",//这里是请求的地址
                type: 'POST',
                data: formdata,
                dataType: "json",
                processData: false, // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                success:function(result){
                    // window.location.href = "admin.html"
                }
                ,error:function(result){

                }
            });
        });
    });
</script>
</body>
</html>